<template>
	<!-- 日历滚动插件 -->
	<view class="zsy_calendar">
		<!-- 日历顶部信息 -->
		<view class="calendar_info">
			<text class="title">{{year}}</text>
			<text class="desc">
				({{getmonth(1)}}月)
			</text>
			<text  class="backToToday" :style="{color: dateActiveColor}"  @tap="goToDate()"></text>
		</view>

		
		<!-- 日历轮播 -->
		<view class="calendar_swiper">
			
			<!-- 收缩情况下的日历轮播 -->
			<swiper
				key="shrinkSwiper"
				circular
				:style="{height: '95rpx'}"
				:current="shrinkCurrent"
				:duration="duration"
				:skip-hidden-item-layout="true"
				@change="e => shrinkCurrent = e.detail.current"
			>
				<swiper-item v-for="(swiper, swiperIndex) in 4" :key="swiperIndex" class="swiper-item">
					<DateBox
						:dates="calendarSwiperShrinkDates[swiperIndex]"
						:cellHeight="cellHeight"
						:dateActiveColor="dateActiveColor"
						:swiperMode="swiperMode"
						@chooseDate="chooseDate"
					/>
				</swiper-item>
			</swiper>
		</view>
	
	</view>
</template>

<script>
	import { parseTime, deepClone } from './js/utils.js'
	import DateBox from './yearBox.vue'
	export default {
		name: 'ZsyCalendar',
		components: {
			DateBox
		},
		props: {
			duration: { // 轮播图动画时长
				type: Number,
				default: 300
			},
			cellHeight: { // 一列的高度
				type: Number,
				default: 75
			},
			dateActiveColor: { // 日期选中颜色
				type: String,
				default: '#FE6601'
			},
			sundayIndex: { // 星期天所在索引，0表示第一个、6表示最后一个
				type: Number,
				default: 6
			},
			mode: { // 日历模式
				type: String,
				default: 'open'
			},
			changeSetDefault: { // 月份切换时是否显示一号还是当前月份选中高亮
				type: Boolean,
				default: true
			},
			defaultSelectedDate: { // 默认选中日期
				type: String | null,
				default: null
			},
			date:{
				type: String ,
				default: parseTime(new Date(), '{y}-{m}-{d}')
			}
		},
		data() {
			return {
				year : parseTime(new Date(), '{y}'),
				today: parseTime(new Date(), '{y}-{m}'), // 今天日期
				selectedDate: null, // 选中日期
				shrinkCurrent: 0, // 缩放日历轮播默认显示索引
				calendarSwiperShrinkDates: [], // 日历轮播收缩时的日期信息
				dateActive: -1, // 日期选中索引
				swiperByClick: false, // 是否通过点击上月份或下月份的日期进行轮播切换
				shrinkSwiperByClick: false, // 是否通过点击上月份或下月份的日期进行收缩日历的轮播切换
				swiperMode: this.mode, // 日历轮播显示模式 open：展开 close：收缩
				dateCache: {}, // 日期缓存
				emitTimer: null, // 日期改变向父级传递当前选中日期计时器
				dateClick: false ,// 是否进行了日期的点击选择
				userId:null
			}
		},
		computed: {
			/* 获取指定日期信息
			isCurDate: 是否获取当天的信息还是选中日期的信息
			index: 0 表示年份 1 表示月份 2 表示日期 */
			getAssignDateInfo() {
				return (isCurDate, index) => {
					return (isCurDate ? this.today : this.selectedDate).split('-')[index] * 1
				}
			},
			getmonth(){
				return(index)=>{
					return this.selectedDate.split('-')[index] * 1
				}
			}
		},
		watch: {
			// 收缩日历轮播切换
			shrinkCurrent(newV, oldV) {
				if(newV-oldV ==1 || newV-oldV == -3){
					this.shrinkSwiperChange(1)
					return
				}else{
					this.shrinkSwiperChange(-1)
					return
				}
			
			},
			selectedDate: {
				deep: true,
				handler(newV, oldV) {
					if (newV && (oldV === null || this.dateClick)) { // 初始化/日历点击选择时直接返回
						this.emitDate()
						this.dateClick = false
					} else { // 其它情况做防抖处理
						if (this.emitTimer !== null) {
							clearTimeout(this.emitTimer)
						}
						this.emitTimer = setTimeout(() => {
							this.emitDate()
						}, this.duration + 200)
					}
				}
			}
		},
		created() {
			this.userId = this.$route.query.userId
			this.init() // 初始化数据
		},
		methods: {
			goToDate(){
				
				this.init()
				this.year = parseTime(new Date(), '{y}')
				this.shrinkCurrent = 1
			},
			// 初始化数据
			init() {
				const prvYear = [
					{
						month:1,
						isSelected:false
					},
					{
						month:2,
						isSelected:false
					},
					{
						month:3,
						isSelected:false
					},{
						month:4,
						isSelected:false
					},{
						month:5,
						isSelected:false
					},
					{
						month:6,
						isSelected:false
					}
				]
				const nexYear = [
					{
						month:7,
						isSelected:false
					},
					{
						month:8,
						isSelected:false
					},
					{
						month:9,
						isSelected:false
					},{
						month:10,
						isSelected:false
					},{
						month:11,
						isSelected:false
					},
					{
						month:12,
						isSelected:false
					}
				]
				if(this.selectedDate == null){
					this.selectedDate =this.today
				}
				if(this.getAssignDateInfo(true,1)<7){//上半年
				    prvYear.map((item,index)=>{
						if(item.month == this.getAssignDateInfo(true,1)){
							item.isSelected = true
							this.dateActive = index
						}
						return item
					})
				    this.calendarSwiperShrinkDates = [prvYear,nexYear,prvYear,nexYear]
					
				}else{
					nexYear.map((item,index)=>{
						if(item == this.getAssignDateInfo(true,1)){
							item.isSelected = true
							this.dateActive = index
						}
						return item
					})
					 this.calendarSwiperShrinkDates = [nexYear,prvYear,nexYear,prvYear]
				}
			},
			// 向父组件传递当前选中数据
			emitDate() {
			
				const e = {
					selectedDate: this.selectedDate,
					type:'month'
				
				}
				this.$emit('change', e)
			},
			shrinkSwiperChange(type){
				console.log(type)
				
				 this.calendarSwiperShrinkDates[this.shrinkCurrent].map(item=>{
				 	item.isSelected =false
				 	return item
				 })
				 this.calendarSwiperShrinkDates[this.shrinkCurrent][0].isSelected = true
				if(type == 1){//右滑动
				   console.log(777,this.shrinkCurrent)
			       if(this.calendarSwiperShrinkDates[this.shrinkCurrent][0].month ==1){
					   this.year = eval(this.year)+1
					  
				   }
					
				}else{
					if(this.calendarSwiperShrinkDates[this.shrinkCurrent][0].month ==7){
						this.year =  eval(this.year)-1
						
					}
				}
	        	this.selectedDate = parseTime(new Date(this.year,this.calendarSwiperShrinkDates[this.shrinkCurrent][0].month-1,1),'{y}-{m}')
				
				
			},
			chooseDate(dateInfo, dateIndex){
				if (dateInfo.isSelected) return false
				this.calendarSwiperShrinkDates[this.shrinkCurrent].map(item=>{
					item.isSelected =false
					return item
				})
				this.calendarSwiperShrinkDates[this.shrinkCurrent][dateIndex].isSelected = true
				this.selectedDate = parseTime(new Date(this.year,this.calendarSwiperShrinkDates[this.shrinkCurrent][dateIndex].month-1,1),'{y}-{m}')
			}
		}
	}
</script>

<style>
	.zsy_calendar {
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	/* 日历顶部信息 */
	.calendar_info {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}
	.calendar_info .title {
		font-size: 34rpx;
		font-weight: bold;
		color: #2C2C2C;
	}
	.calendar_info .desc {
		margin-left: 29rpx;
		font-size: 28rpx;
		color: #959595;
	}
	.calendar_info .backToToday {
		margin-left: auto;
		font-size: 24rpx;
	}
	/* 日历顶部信息 */
	
	/* 日历周数 */
	.calendar_week {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #959595;
		margin: 20rpx 0rpx;
	}
	.calendar_week .calendar_week__item {
		width: calc(100% / 7);
		text-align: center;
	}
	/* 日历周数 */
	
	/* 日历切换模式 */
	.calendar_toggle {
		position: relative;
		padding: 10rpx 0;
		margin: 10rpx 20rpx 0;
		display: flex;
		justify-content: center;
	}
	.calendar_toggle .icon {
		width: 30rpx;
		height: 30rpx;
		background-image: url('../../static/zsy-calendar/arrow.png');
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 auto;
		transition: all .3s;
	}
	.icon.down {
		transform: rotate(180deg);
	}
	.calendar_toggle::before, .calendar_toggle::after {
		width: calc(50% - 30rpx);
		border-top: solid 2rpx #EAEAEA;
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.calendar_toggle::before {
		left: 0;
	}
	.calendar_toggle::after {
		right: 0;
	}
	/* 日历切换模式 */
</style>
